<template>
	<view style="padding-top: 30rpx;">
		<view class="site" v-if="default_address">
			<view class="up">
				<image src="../static/a1.png" mode=""></image>
				<view class="name">
					收货信息
				</view>
			</view>
			<view class="down">
				<view class="name">
					{{default_address.username}}
				</view>
				<view class="tel">
					{{default_address.telphone}}
				</view>
			</view>
			<view class="text">
				{{default_address.region+default_address.detail}}
			</view>
			<image src="../../htmlA/static/go.png" class="go"></image>
		</view>
		<view class="site" v-else @click="toPage('/pages/htmlA/address/index')">
			<view class="add">
				请添加收货地址
			</view>
		</view>
		<view class="content">
			<view class="list" v-for="(item,index) in all_product" :key="index">
				<image :src="img_pre+ item.thumbnail" class="head"></image>
				<view class="goods">
					<view class="name omit2">
						{{item.pname}}
					</view>
					<view class="number">
						<view class="left">
							<view class="icon2">
								{{item.specs_str}}
							</view>
						</view>
						<view class="right">
							x{{item.count}}
						</view>
					</view>
					<view class="money">
						{{item.price}} <text>蜂钻</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<view class="pull-left">
				<view class="name">
					合计
				</view>
				<view class="number">
					{{number}} <text>蜂钻</text>
				</view>
			</view>
			<button type="default" @click="payshow=true">提交订单</button>
		</view>
		<u-keyboard mode="number" :dot-enabled="false" v-model="payshow" :tooltip="false" @change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center">
					<view class="u-text-name">
						二级密码
					</view>
					<view class="u-text-text">
						您当前正在进行交易，为确保账户安全请输入二级 密码验证身份
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
						:disabled-keyboard="true"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips"></view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				default_address: {},
				all_product: [],
				number: 0,
				timeout2: 1000,
				product_arr: {},
				is_car: 0,
				password: "",
				payshow: false
			}
		},
		onLoad(option) {
			than = this;
			if (option.is_car) {
				than.is_car = option.is_car
			}
			than.product_arr = JSON.parse(option.product_arr)
			than.post('api/product/ready', {
				product_arr: than.product_arr
			}, function(data) {
				than.default_address = data.default_address
				than.all_product = data.all_product

				for (let i in data.all_product) {
					than.number += data.all_product[i].price;
				}
			})
		},
		methods: {
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}
				if (this.password.length >= 6) {
					than.reserve();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			reserve() {
				uni.showLoading({
					title: '支付中'
				});
				this.$u.debounce(this.getResult, this.timeout2, false);
			},
			getResult() {
				than.post('api/product/reserve', {
					aid: than.default_address.aid,
					product_arr: than.product_arr,
					is_car: than.is_car,
					password: than.password
				}, function(data) {
					uni.hideLoading();
					uni.redirectTo({
						url: '/pages/user/list'
					})
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #F8F8F8;
	}

	.add {
		padding-top: 30rpx;
		font-weight: bold;
		font-size: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pay {
		position: fixed;
		bottom: 0;
		height: 126rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px -3rpx 14rpx 0px rgba(0, 30, 214, 0.08);
		border-radius: 70rpx 70rpx 0px 0px;
		display: flex;
		align-items: center;

		button {
			float: right;
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
			line-height: 74rpx;
			background: rgba(237, 112, 67, 1);
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			margin-right: 36rpx;
		}

		.pull-left {
			display: flex;
			align-items: center;
			height: 98rpx;

			.name {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				margin: 0 15rpx 0 60rpx;
			}

			.number {

				text {
					font-size: 24rpx;
					margin-right: 8rpx;
				}

				font-size:36rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(227, 25, 25, 1);
			}
		}
	}

	.content {
		width: 678rpx;
		margin: 0 auto 120rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(0, 0, 0, 1);
			height: 104rpx;
			line-height: 104rpx;
			padding: 0 24rpx;
			border-bottom: 2rpx solid #F7F7F7;
		}

		.total {
			height: 90rpx;
			color: #E31919;
			text-align: right;
			font-size: 36rpx;
			padding: 0 24rpx;

			.t1 {
				font-size: 24rpx;
				color: #333333;
			}

			.t2 {
				font-size: 24rpx;
			}
		}

		.list {
			height: 240rpx;
			display: flex;
			align-items: center;
			padding: 0 24rpx;

			.head {
				width: 168rpx;
				height: 168rpx;
			}

			.goods {
				margin-left: 23rpx;
				width: 440rpx;

				.name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}

				.number {
					display: flex;
					align-items: center;
					margin: 25rpx 0;

					.left {
						.icon2 {
							padding: 5rpx 27rpx;
							background: #F8F8F8;
							border: 1rpx solid #DCDCDC;
							border-radius: 19rpx;
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}
					}

					.right {
						margin-left: auto;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(102, 102, 102, 1);
					}
				}
			}

			.money {
				margin-left: auto;

				text {
					margin-right: 8rpx;
					font-size: 24rpx;
				}

				font-size:36rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(227, 25, 25, 1);
			}
		}
	}

	.site {
		width: 678rpx;
		background: #FFFFFF;
		padding-bottom: 30rpx;
		margin: auto auto 20rpx;
		border-radius: 12rpx;
		position: relative;

		.go {
			position: absolute;
			width: 14rpx;
			height: 25rpx;
			right: 24rpx;
			top: 94rpx;
		}

		.up {
			display: flex;
			align-items: center;
			height: 96rpx;

			image {
				width: 27rpx;
				height: 27rpx;
				margin-left: 24rpx;
			}

			.name {
				margin: 0 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}


		}

		.down {
			display: flex;
			align-items: center;

			.name {
				margin: 0 20rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.tel {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			margin-top: 27rpx;
			margin-left: 24rpx;
		}
	}
</style>
